import { request } from '@/api/request';
import { useEffect, useRef, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import type { YmColumnsType } from 'ym-design';
import { YmTable } from 'ym-design';
type RecordType = {
  safetyIndexEntId: string;
  entName: string;
  entSafetyIndex: number;
  entTypeCode: string;
  ymNumber: string;
  auditStatus: number;
  qualityAuditStatus: number;
  createTime: number;
  entId: string;
};
const SafeEntList = () => {
  const navigator = useNavigate();
  const [entTypeOptions, setEntTypeOptions] = useState<{ value: string; label: string }[]>([]);

  const entTypeOptionsRef = useRef<Array<{ value: string; label: string }>>([]);

  useEffect(() => {
    request<{ entTypeCode: string; name: string }[]>({
      url: 'account/ent/api/typeConfig/list',
    }).then((res) => {
      if (res.code == '200' && res.data) {
        const option: { value: string; label: string }[] = [];
        res.data.map((v) => {
          option.push({
            value: v.entTypeCode,
            label: v.name,
          });
        });

        entTypeOptionsRef.current = option;

        setEntTypeOptions([...option]);
      }
    });
  }, []);

  const columns: YmColumnsType<RecordType> = [
    {
      title: '企业名称',
      dataIndex: 'entName',
      key: 'entName',
      ellipsis: true,
      width: '220px',
      render(value, record, index) {
        return (
          <span
            className="safe-edu_table_operation_text"
            onClick={() => {
              navigator(
                `/safeIndex/safeIndexStatistics/entIndexDetail?safetyIndexEntId=${record.safetyIndexEntId}&entId=${record.entId}&entName=${record.entName}`,
              );
            }}
          >
            {value || '--'}
          </span>
        );
      },
    },
    {
      title: '企业安全指数',
      dataIndex: 'safetyIndex',
      key: 'safetyIndex',
      width: 100,
      ellipsis: true,
      render: (text, record) => <span>{text.toFixed(0) || '--'}</span>,
    },
    {
      title: '企业类型',
      dataIndex: 'entTypeCode',
      key: 'entTypeCode',
      ellipsis: true,
      render: (text, record) => {
        const data = entTypeOptionsRef.current?.find((item) => item.value === text);

        return <span>{data?.label || '--'}</span>;
      },
    },
    {
      title: '运脉号',
      dataIndex: 'ymNumber',
      ellipsis: true,
      key: 'ymNumber',
    },
    {
      title: '企业认证状态',
      dataIndex: 'auditStatus',
      key: 'auditStatus',
      ellipsis: true,
      render: (text, record) => <span>{text == 1 ? '审核中' : text == 2 ? '已认证' : '未认证'}</span>,
    },
    {
      title: '资质认证状态',
      dataIndex: 'qualityAuditStatus',
      key: 'qualityAuditStatus',
      ellipsis: true,
      render: (text, record) => <span>{text == 1 ? '审核中' : text == 2 ? '已认证' : '未认证'}</span>,
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
      ellipsis: true,
    },
  ];

  const [tableDep, _reFreshTable] = useState<number>();
  const [searchParams, setEventParams] = useState({
    startTime: '',
    endTime: '',
  });

  return (
    <div className="safe_boss_page">
      <YmTable
        searchForm={{
          formItems: [
            {
              label: '企业名称',
              name: 'entName',
              valueType: {
                type: 'input',
                inputProps: {
                  placeholder: '请输入',
                  autoComplete: 'off',
                },
              },
            },
            {
              label: '运脉号',
              name: 'ymNumber',
              valueType: {
                type: 'input',
                inputProps: {
                  placeholder: '请输入',
                  autoComplete: 'off',
                },
              },
            },
            {
              label: '企业类型',
              name: 'entTypeCode',
              valueType: {
                type: 'select',
                selectProps: {
                  allowClear: true,
                  placeholder: '所有',
                  options: entTypeOptions,
                },
              },
            },
            {
              label: '企业认证',
              name: 'auditStatus',
              valueType: {
                type: 'select',
                selectProps: {
                  allowClear: true,
                  placeholder: '所有',
                  options: [
                    {
                      value: '',
                      label: '所有',
                    },
                    {
                      value: 2,
                      label: '已认证',
                    },
                    {
                      value: 4,
                      label: '未认证',
                    },
                    {
                      value: 1,
                      label: '审核中',
                    },
                  ],
                },
              },
            },
            {
              label: '资质认证',
              name: 'qualityAuditStatus',
              valueType: {
                type: 'select',
                selectProps: {
                  allowClear: true,
                  placeholder: '所有',
                  options: [
                    {
                      value: '',
                      label: '所有',
                    },
                    {
                      value: 2,
                      label: '已认证',
                    },
                    {
                      value: 4,
                      label: '未认证',
                    },
                    {
                      value: 1,
                      label: '审核中',
                    },
                  ],
                },
              },
            },
          ],
          span: 6,
        }}
        columns={columns}
        request={async ({ page }, form) => {
          const { data } = await request<{ list: any[]; total: number }>({
            url: '/unicron/ent/safetyIndex/entList',
            data: {
              ...searchParams,
              ...page,
              ...form,
            },
          });

          return data;
        }}
        requestOptions={{
          reFreshDep: [tableDep],
          defaultPageSize: 10,
        }}
        rowKey="safetyIndexEntId"
      />
    </div>
  );
};
export default SafeEntList;
